<template>
    <div>
        <el-form :inline="true" label-width="80px" style="width:400px" @submit.native.prevent>
            <el-form-item label="电影名称">
                <el-input @keydown.native.enter="MovieQueryBtn" v-model="movieName"  placeholder="输入电影名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="MovieQueryBtn">查询</el-button>
            </el-form-item>
        </el-form>
        <el-divider content-position="left">电影列表</el-divider>
        <el-table :data="tableData.result">
            <el-table-column label="封面">
                <template slot-scope="scope">
                    <img style="height:120px" :src="scope.row.cover">
                </template>
            </el-table-column>
            <el-table-column label="标题" prop="title">
            </el-table-column>
            <el-table-column label="主演" prop="star_actor">
            </el-table-column>
            <el-table-column label="上映时间" prop="showingon">
            </el-table-column>
            <el-table-column label="时长">
                <template slot-scope="scope">
                    {{(scope.row.duration/60).toFixed(2)}}小时
                </template>
            </el-table-column>
            <el-table-column label="所属类型" prop="type">
            </el-table-column>
            <el-table-column label="操作" width="220px">
                <template slot-scope="scope">
                    <el-button circle type="info" class="el-icon-user-solid"></el-button>
                    <el-button circle type="success" class="el-icon-picture-outline"></el-button>
                    <el-button circle @click="$router.push(`/home/movie-update/${scope.row.id}`)" type="warning" class="el-icon-edit"></el-button>
                    <el-button @keydown.native.prevent circle type="danger" class="el-icon-delete" @click="deleteBtn(scope.row.id)"></el-button>
                    
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top:15px"
            background
            layout="->,prev, pager, next,jumper,sizes,total"
            :total="tableData.total"
            :page-sizes="[3,5,10,20]"
            :page-size="tableData.pagesize"
            :current-page="tableData.page"
            @current-change="changeCurrentPage"
            @size-change="changeSize"
            >
        </el-pagination>
    </div>
</template>

<script>
import httpApi from '@/http/index'
    export default {
        data() {
            return {
                tableData: {
                    page:1,
                    pagesize:3,
                    result:[],
                    total:0,
                },
                movieName:'',
                    // {
                    //     imgUrl:'',
                    //     MovieTitle:'如果你听不见',
                    //     actorName:'疗效下',
                    //     date:"2024-4-55",
                    //     movie_Time:"123",
                    //     type:"热映",
                    //     movie_id:1
                    // },
                    // {
                    //     imgUrl:'',
                    //     MovieTitle:'如果你听不见2',
                    //     actorName:'疗效下2',
                    //     date:"2024-4-55", .
                    //     movie_Time:"123",
                    //     type:"热映2",
                    //     movie_id:2
                    // }
            }
        },
        methods: {
            // 跳转修改页面
            // navUpdate(id){
            //     console.log(id);
            //     // this.$router.push(`/home/movie-add`)

            // },
            // 删除电影按钮
            deleteBtn(id){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log(id)
                    httpApi.movieApi.deleteMovie({id}).then(res=>{
                        console.log(res);
                        let maxPage = Math.ceil((this.tableData.total - 1 ) / this.tableData.pagesize)
                        if(this.tableData.page > maxPage){
                            this.tableData.page = maxPage
                        }
                        this.movieSearch()
                    })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            },
            // 加载页码=page的电影列表  每页pagesize条
            movieList(){
                httpApi.movieApi.movieList({page:this.tableData.page,pagesize:this.tableData.pagesize}).then(res=>{
                    console.log(res,'++++++++++++');
                        this.tableData = res.data.data
                })
            },
            // 当前页码被改变后触发
            changeCurrentPage(page){
                console.log("当前页改为",page);
                this.tableData.page = page
                this.page = page
                this.movieSearch()
            },
            // pagesize发生变化后触发
            changeSize(pagesize){
                console.log(pagesize);
                this.tableData.pagesize = pagesize
                this.movieSearch()
            },
            // 电影模糊查询按钮点击事件
            MovieQueryBtn(){
                this.tableData.page = 1
                this.movieSearch()
            },
            // 拆出来为分页提供方法复用
            movieSearch(){
                if(this.movieName.trim()){
                    this.MovieNameQuery()
                }else{
                    this.movieList()
                }
            },
            // 电影模糊查询
            MovieNameQuery(){
                console.log(this.movieName);
                let params = {
                    name:this.movieName.trim(),
                    page:this.tableData.page,
                    pagesize:this.tableData.pagesize
                }
                httpApi.movieApi.movieNamequery(params).then(res=>{
                        console.log(res)
                        this.tableData = res.data.data
                })       
            }

        },
        mounted (){
            this.movieList()
        }
        
    }
</script>

<style lang="scss" scoped>

</style>